:root {
  --el-color-white: #f8f9fa;
  --el-color-black: #212529;

  --el-color-primary-rgb: 34, 139, 230;
  --el-color-success-rgb: 40, 167, 69;
  --el-color-warning-rgb: 255, 193, 7;
  --el-color-danger-rgb: 220, 53, 69;
  --el-color-error-rgb: 220, 53, 69;
  --el-color-info-rgb: 23, 162, 184;

  --el-font-size-extra-large: 22px;
  --el-font-size-large: 20px;
  --el-font-size-medium: 18px;
  --el-font-size-base: 16px;
  --el-font-size-small: 14px;
  --el-font-size-extra-small: 12px;

  --el-font-family: "Arial", "Helvetica Neue", sans-serif;
  --el-font-weight-primary: 600;
  --el-font-line-height-primary: 26px;

  --el-index-normal: 10;
  --el-index-top: 1050;
  --el-index-popper: 2050;

  --el-border-radius-small: 3px;
  --el-border-radius-round: 25px;
  --el-border-radius-circle: 50%;

  --el-transition-duration: 0.4s;
  --el-transition-duration-fast: 0.25s;
  --el-transition-function-ease-in-out-bezier: cubic-bezier(0.42, 0, 0.58, 1);
  --el-transition-function-fast-bezier: cubic-bezier(0.25, 1, 0.5, 1);
  --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
  --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier), opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
  --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
  --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
  --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);

  --el-component-size-large: 42px;
  --el-component-size: 34px;
  --el-component-size-small: 26px;

  color-scheme: dark;

  --el-color-primary: #228be6;
  --el-color-primary-light-3: rgb(102, 184, 255);
  --el-color-primary-light-5: rgb(153, 204, 255);
  --el-color-primary-light-7: rgb(204, 224, 255);
  --el-color-primary-light-8: rgb(229, 239, 255);
  --el-color-primary-light-9: rgb(242, 247, 255);
  --el-color-primary-dark-2: rgb(28, 112, 184);

  --el-color-success: #28a745;
  --el-color-success-light-3: rgb(92, 184, 92);
  --el-color-success-light-5: rgb(123, 204, 123);
  --el-color-success-light-7: rgb(153, 224, 153);
  --el-color-success-light-8: rgb(184, 239, 184);
  --el-color-success-light-9: rgb(214, 247, 214);
  --el-color-success-dark-2: rgb(33, 123, 33);

  --el-color-warning: #ffc107;
  --el-color-warning-light-3: rgb(255, 223, 128);
  --el-color-warning-light-5: rgb(255, 234, 153);
  --el-color-warning-light-7: rgb(255, 245, 179);
  --el-color-warning-light-8: rgb(255, 250, 204);
  --el-color-warning-light-9: rgb(255, 253, 230);
  --el-color-warning-dark-2: rgb(204, 153, 0);

  --el-color-danger: #dc3545;
  --el-color-danger-light-3: rgb(233, 94, 105);
  --el-color-danger-light-5: rgb(240, 133, 145);
  --el-color-danger-light-7: rgb(247, 172, 185);
  --el-color-danger-light-8: rgb(251, 201, 211);
  --el-color-danger-light-9: rgb(254, 230, 236);
  --el-color-danger-dark-2: rgb(184, 46, 58);

  --el-color-error: #dc3545;
  --el-color-error-light-3: rgb(233, 94, 105);
  --el-color-error-light-5: rgb(240, 133, 145);
  --el-color-error-light-7: rgb(247, 172, 185);
  --el-color-error-light-8: rgb(251, 201, 211);
  --el-color-error-light-9: rgb(254, 230, 236);
  --el-color-error-dark-2: rgb(184, 46, 58);

  --el-color-info: #17a2b8;
  --el-color-info-light-3: rgb(77, 192, 205);
  --el-color-info-light-5: rgb(128, 213, 224);
  --el-color-info-light-7: rgb(179, 234, 243);
  --el-color-info-light-8: rgb(204, 242, 247);
  --el-color-info-light-9: rgb(230, 250, 252);
  --el-color-info-dark-2: rgb(20, 123, 140);

  --el-bg-color: #f8f9fa;
  --el-bg-color-page: #e9ecef;
  --el-bg-color-overlay: #ffffff;

  --el-text-color-primary: #212529;
  --el-text-color-regular: #495057;
  --el-text-color-secondary: #6c757d;
  --el-text-color-placeholder: #adb5bd;
  --el-text-color-disabled: #ced4da;

  --el-border-color: #dee2e6;
  --el-border-color-light: #e9ecef;
  --el-border-color-lighter: #f1f3f5;
  --el-border-color-extra-light: #f8f9fa;
  --el-border-color-dark: #ced4da;
  --el-border-color-darker: #adb5bd;

  --el-fill-color: #f1f3f5;
  --el-fill-color-light: #f8f9fa;
  --el-fill-color-lighter: #ffffff;
  --el-fill-color-extra-light: #ffffff;
  --el-fill-color-dark: #e9ecef;
  --el-fill-color-darker: #dee2e6;
  --el-fill-color-blank: #ffffff;

  --el-box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.05), 0px 6px 15px rgba(0, 0, 0, 0.1);
  --el-box-shadow-light: 0px 0px 10px rgba(0, 0, 0, 0.1);
  --el-box-shadow-lighter: 0px 0px 5px rgba(0, 0, 0, 0.1);
  --el-box-shadow-dark: 0px 14px 40px 14px rgba(0, 0, 0, 0.1), 0px 10px 30px rgba(0, 0, 0, 0.15), 0px 6px 12px -6px rgba(0, 0, 0, 0.2);

  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);

  --el-overlay-color: rgba(0, 0, 0, 0.85);
  --el-overlay-color-light: rgba(0, 0, 0, 0.75);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.55);

  --el-mask-color: rgba(255, 255, 255, 0.95);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.35);

  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);

  --el-svg-monochrome-grey: var(--el-border-color);
}

/* Element Plus 样式覆盖 - 专业商务风格 */
:root {
  /* 主色调 */
  --el-color-primary: #165DFF;
  --el-color-primary-light-3: #4080FF;
  --el-color-primary-light-5: #6AA1FF;
  --el-color-primary-light-7: #94BFFF;
  --el-color-primary-light-8: #B3D1FF;
  --el-color-primary-light-9: #D1E3FF;
  --el-color-primary-dark-2: #0E42D2;

  /* 功能色 */
  --el-color-success: #00B42A;
  --el-color-warning: #FF7D00;
  --el-color-danger: #F53F3F;
  --el-color-info: #86909C;

  /* 中性色 */
  --el-bg-color: #F2F3F5;
  --el-bg-color-page: #F2F3F5;
  --el-bg-color-overlay: #FFFFFF;
  --el-text-color-primary: #1D1E20;
  --el-text-color-secondary: #4E5969;
  --el-text-color-placeholder: #86909C;
  --el-text-color-disabled: #C9CDD4;
  --el-border-color: #E5E6EB;
  --el-border-color-light: #C9CDD4;
  --el-border-color-lighter: #EDEDED;
  --el-border-color-extra-light: #F2F3F5;
  --el-fill-color: #F7F8FA;
  --el-fill-color-light: #F2F3F5;
  --el-fill-color-lighter: #E5E6EB;
  --el-fill-color-extra-light: #F7F8FA;
  --el-fill-color-blank: #FFFFFF;

  /* 组件特定样式 */
  --el-card-bg: #FFFFFF;
  --el-card-header-bg: #FFFFFF;
  --el-table-bg: #FFFFFF;
  --el-table-header-bg: #F7F8FA;
  --el-table-row-hover-bg: #F7F8FA;
  --el-menu-bg: #FFFFFF;
  --el-menu-hover-bg: #F7F8FA;
  --el-menu-active-bg: #E8F3FF;
  --el-button-primary-bg: #165DFF;
  --el-button-primary-hover-bg: #4080FF;
}

/* 暗色模式变量 - 使用时需在html根元素添加dark类 */
:root.dark {
  /* 主色调 */
  --el-color-primary: #4080FF;
  --el-color-primary-light-3: #6AA1FF;
  --el-color-primary-light-5: #94BFFF;
  --el-color-primary-light-7: #B3D1FF;
  --el-color-primary-light-8: #D1E3FF;
  --el-color-primary-light-9: #E8F3FF;
  --el-color-primary-dark-2: #0E42D2;

  /* 功能色 */
  --el-color-success: #00C230;
  --el-color-warning: #FF9A2E;
  --el-color-danger: #FF7D7D;
  --el-color-info: #86909C;

  /* 中性色 */
  --el-bg-color: #1D1E20;
  --el-bg-color-page: #1D1E20;
  --el-bg-color-overlay: #2D2E30;
  --el-text-color-primary: #F2F3F5;
  --el-text-color-secondary: #C9CDD4;
  --el-text-color-placeholder: #86909C;
  --el-text-color-disabled: #4E5969;
  --el-border-color: #4E5969;
  --el-border-color-light: #6B7785;
  --el-border-color-lighter: #4E5969;
  --el-border-color-extra-light: #333842;
  --el-fill-color: #2D2E30;
  --el-fill-color-light: #333842;
  --el-fill-color-lighter: #4E5969;
  --el-fill-color-extra-light: #2D2E30;
  --el-fill-color-blank: #1D1E20;

  /* 组件特定样式 */
  --el-card-bg: #2D2E30;
  --el-card-header-bg: #2D2E30;
  --el-table-bg: #2D2E30;
  --el-table-header-bg: #333842;
  --el-table-row-hover-bg: #333842;
  --el-menu-bg: #2D2E30;
  --el-menu-hover-bg: #333842;
  --el-menu-active-bg: #165DFF1A;
  --el-button-primary-bg: #4080FF;
  --el-button-primary-hover-bg: #6AA1FF;
}